﻿<div class="demo-description" id="Selection">
    <h2>
        <DemoNavLink Link="TreeView#Selection" />TreeView - Selection
    </h2>
    <p>
        The DevExpress <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView">TreeView</a> for Blazor displays hierarchical data structures within a tree-like UI. The component can be used to simplify navigation within a web app or to display self-referenced information to end-users.
    </p>
    <p>
        A collection of TreeView nodes is populated by the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView.Nodes">Nodes</a> parameter. For each node, you can also specify its child nodes (using the parent node’s <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeViewNode.Nodes">Nodes</a> parameter), unique identifier, text, target URL, and etc.
    </p>
    <p>
        The TreeView allows users to select a node with a mouse click. The selected node is automatically highlighted. The following API is related to the node selection:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView.AllowSelectNodes">AllowSelectNodes</a> - Controls whether or not nodes can be selected.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView.SelectionChanged">SelectionChanged</a> - Occurs after node selection.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView.GetSelectedNodeInfo">GetSelectedNodeInfo</a> - Returns information about the currently selected node: name, text and etc.</li>
    </ul>
    <p>Additionally, TreeView supports synchronization of a node selection with the path of the currently displayed page. The left-hand navigation tree of this demo shows the mentioned feature in action.*</p>
    <p>
        <i>* You can find the navigation TreeView’s source code in the <a href="https://github.com/DevExpress/Blazor/blob/master/demo/BlazorDemo.ServerSide/BlazorDemo/Shared/NavMenu.razor">NavMenu.razor</a> file within the <a href="https://github.com/DevExpress/Blazor">DevExpress Blazor</a> GitHub repository.</i>
    </p>
</div>
<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar ShowSizeSelector="false"
                     Title=@($"Selected group: {SelectedGroup}")/>
    </div>
    <div class="card-body">
        <h5 class="card-title">Chemical elements</h5>
        <DxTreeView AllowSelectNodes="true" SelectionChanged="@SelectionChanged" CssClass="mw-480">
            <Nodes>
                <DxTreeViewNode Text="Metals">
                    <Nodes>
                        <DxTreeViewNode Text="Alkali metals" />
                        <DxTreeViewNode Text="Alkaline earth metals" />
                        <DxTreeViewNode Text="Inner transition elements">
                            <Nodes>
                                <DxTreeViewNode Text="Lanthanides" />
                                <DxTreeViewNode Text="Actinides" />
                            </Nodes>
                        </DxTreeViewNode>
                        <DxTreeViewNode Text="Transition elements" />
                        <DxTreeViewNode Text="Other metals" />
                    </Nodes>
                </DxTreeViewNode>
                <DxTreeViewNode Text="Metalloids" />
                <DxTreeViewNode Text="Nonmetals">
                    <Nodes>
                        <DxTreeViewNode Text="Halogens" />
                        <DxTreeViewNode Text="Noble gases" />
                        <DxTreeViewNode Text="Other nonmetals" />
                    </Nodes>
                </DxTreeViewNode>
            </Nodes>
        </DxTreeView>
    </div>
</div>
<CodeSnippet_TreeView_Selection></CodeSnippet_TreeView_Selection>

@code  {
    string SelectedGroup = "none";

    protected void SelectionChanged(TreeViewNodeEventArgs e)
    {
        SelectedGroup = e.NodeInfo.Text;
        InvokeAsync(StateHasChanged);
    }
}
